<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>二维码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/ie.css">
    <![endif]-->
    <script src="../js/jQuery.v3.1.2-pre.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../core.js"></script>
    <script src="../jscolor-2.0.4//jscolor.min.js"></script>
    <script src="./qrcode.min.js"></script>
    <script src="./dist/JsBarcode.all.min.js"></script>
  </head>

  <body>
    <div class="content">
      <table class="table table-bordered table-striped table-hover">
        <tr>
          <th><span>控件ID</span></th>
          <th><span>数值</span></th>
        </tr>
        <tr>
          <td><input type="text" id="txtID" placeholder="必填项"></td>
          <td><input type="text" id="address" placeholder="" onchange="urlChange()"></td>
        </tr>
        <tr>
            <th><span>类别</span></th>
            <th><span>提示内容</span></th>
        </tr>
        <tr>
            <td>
                <select id="txtType" onchange="urlChange()">
                    <option value="qrcode">二维码</option>
                    <option value="barcode">条形码</option>
                  </select>
            </td>
            <td><input type="text" id="txtDESC" placeholder=""></td>
            <td style="display:none"><img id="test"></img></td>
        </tr>
      </table>
    </div>
    <script>
      /*
              label结构：
              <span id="label1" sde-type="label" class="sde-ctrl sde-label" title="[可选]">
                label内容
              </span>
              其中：id，class 为必须项，class可以扩展，有自定义样式
              */
             //二维码
            let qrcode = new QRCode(document.getElementById('test'), {
                text:'',
                width : 120,
                height : 120,
                correctLevel:3
            });
            let url = '';
            document.getElementById('test').querySelector('img').addEventListener('load',(event)=>{
                url = event.target.src
            })
            document.getElementById('test').addEventListener('load',(event)=>{
                url = event.target.src
            })
            //条形码
           let barCodeOptions = {
                format:"CODE128",
                displayValue:true,
                fontSize:18,
                height:100
            };
        function urlChange(){
            let val = $('#address').val()
            if($('#txtType').val() === 'qrcode'){//二维码
                qrcode.makeCode(val);
            }else{//条形码
                JsBarcode(document.getElementById('test'), val, barCodeOptions);
            }
        };
      (function(UE) {
        var thePlugins = 'qrcode',
          ctrl, opt, domCtrl;
        window.onload = function() {
          if (UE.plugins[thePlugins].sdectrl) {
            //修改
            domCtrl = UE.plugins[thePlugins].sdectrl;
            console.log('domCtrl',domCtrl,domCtrl.getAttribute('id'))
            // opt = ctrl.getOpt() || {};
            // domCtrl = ctrl.getCtrlElement();
            $('#txtID').val(domCtrl.getAttribute('id') || '');
            $('#address').val(domCtrl.getAttribute('url') || '');
            $('#txtDESC').val(domCtrl.getAttribute('title') || '');
            $('#txtType').val(domCtrl.getAttribute('txtType') || '');
            if($('#txtType').val() === 'qrcode'){//二维码
                qrcode.makeCode(domCtrl.getAttribute('url'));
            }else{
                JsBarcode(document.getElementById('test'), domCtrl.getAttribute('url'), barCodeOptions);
            }
          }

        };
        dialog.oncancel = function() {
          if (UE.plugins[thePlugins].sdectrl) {
            delete UE.plugins[thePlugins].sdectrl;
          }
        };
        dialog.onok = function() {
          var newOpt = opt || {};
          newOpt.address = $('#address').val();
          newOpt.desc = $('#txtDESC').val();
          newOpt.txtType = $('#txtType').val();
          if(!newOpt.address){
            url = ''
          }
          if (!!domCtrl) {
            domCtrl.setAttribute('id', $G('txtID').value);
            domCtrl.setAttribute('title', newOpt.desc);
            domCtrl.setAttribute('url',newOpt.address);
            domCtrl.setAttribute('txtType',newOpt.txtType);
            domCtrl.innerHTML = `<p style="margin: 0px; font-size: 12px;">
                                <img class="sde-qrcode" style="width: 200px; height: ${newOpt.txtType === 'qrcode' ? '200px':'100px'};" src=${url} /><br/>${$('#txtDESC').val()}<br/>
                            </p>`
            delete UE.plugins[thePlugins].sdectrl;
          } else {
            //新增
            domCtrl = UE.dom.domUtils.createElement(document, 'div', {
              class: 'sde-qrcode',
              id: $G('txtID').value,
              'sde-type': 'qrcode',
              title: newOpt.desc,
              url:newOpt.address,
              txtType:newOpt.txtType,
              style:'width:200px;text-align: center; word-break: break-all;display:inline-block'
            });
            domCtrl.innerHTML = `<p style="margin: 0px; font-size: 12px;">
                                <img class="sde-qrcode" style="width: 200px; height: ${newOpt.txtType === 'qrcode' ? '200px':'100px'}" src=${url} /><br/>${$('#txtDESC').val()}<br/>
                            </p>`
                editor.execCommand('insertHtml', domCtrl.outerHTML)
          }
        };

      })(UE);
    </script>
  </body>

</html>
